<template>
  <div class="top-group">
    <div>
      <div style="display: flex">
        <span class="top-classifies-label">{{ $t("common.type") }}</span>
        <span class="top-classifies-label" v-if="language === 'zh-cn'">型</span>
        <div
          style="display: flex; flex-wrap: wrap"
          v-if="classifies.length > 1"
        >
          <span
            class="res-span"
            :class="[item.selected ? 'res-span-active' : '']"
            v-for="(item, index) in classifies"
            :key="index"
            @click="onChangeType(item)"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <div style="display: flex; margin-top: 10px">
        <span class="top-classifies-label">{{ $t("common.classify") }}</span>
        <span class="top-classifies-label" v-if="language === 'zh-cn'">类</span>
        <div style="display: flex; flex-wrap: wrap">
          <span
            class="res-span"
            :class="[item.selected ? 'res-span-active' : '']"
            v-for="(item, index) in sub"
            :key="index"
            @click="onChangeClassifies(item, index)"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <div
        style="display: flex; margin-top: 10px"
        v-if="sub[0].selected !== true && sub[num].children.length > 0"
      >
        <span class="top-classifies-label">{{ $t("common.subClassify") }}</span>
        <div style="display: flex; flex-wrap: wrap">
          <span
            class="res-span"
            :class="[item.selected ? 'res-span-active' : '']"
            v-for="(item, index) in sub[num].children"
            :key="index"
            @click="onChangeThirdClassifies(item, index)"
            >{{ item.name }}</span
          >
        </div>
      </div>
    </div>
    <div style="display: flex; flex-direction: column; align-items: flex-end">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import ajax from "../../common/ajax";
import api from "../../common/api";
import encryption from "../../common/encryption";

export default {
  name: "ResSearchParam",
  data() {
    return {
      // 类型
      classifies: [
        {
          resourceType: "",
          name: "全部",
        },
        {
          resourceType: 0,
          name: "普通模型",
          selected: false,
        },
        {
          resourceType: 12,
          name: "网页模型",
          selected: false,
        },
        {
          resourceType: 2,
          name: "自定义模型",
          selected: false,
        },
        {
          resourceType: 14,
          name: "二级节点模型",
          selected: false,
        },
        {
          resourceType: 3,
          name: "视频",
          selected: false,
        },
        {
          resourceType: 4,
          name: "图片",
          selected: false,
        },
        {
          resourceType: 9,
          name: "音频",
          selected: false,
        },
        {
          resourceType: 5,
          name: "全景链接",
          selected: false,
        },
      ],
      // 分类
      sub: [],
      num: 0,
      //子分类
      childSub: [],
      // subType: -1,
      // 手动选择的分类ID
      selectedPid: -1,
      thirdSub: -1,
    };
  },
  props: {
    // 资源归属
    belong: {
      default: 1,
      type: Number,
    },
    // 语言环境
    language: {
      default: "zh-cn",
      type: String,
    },
    // 类型ID
    pid: {
      default: -1,
      type: Number,
    },
    onChangeParentType: Function,
    onChangeParentClassifies: Function,
    onChangeThirdParentClassifies: Function,
    onChangeParentOrder: Function,
  },
  created() {
    this.onChangeParentType(this.$route.query);
    intiTypeDataSelected(this, this.$route.query);
    initSubClassifies(this);
    this.onChangeType(this.$route.query);
    this.v = this.classifies.filter(
      (o) => o.resourceType == this.$route.query.resourceType
    );
    this.v[0].selected = true;
  },
  methods: {
    /**
     * 改变资源类型
     *
     * @param item 资源对象
     */
    onChangeType(item) {
      intiTypeDataSelected(this, item);
      initSubClassifies(this);
      this.onChangeParentType(item);
    },

    /**
     * 改变资源分类
     *
     * @param item 资源对象
     */
    onChangeClassifies(item, index) {
      this.num = index;
      intiClassifiesSelected(this, item, index);
      this.subType = item.id;
      this.onChangeParentClassifies(item);
    },

    /**
     * 改变资源子分类
     *
     * @param item 资源对象
     */
    onChangeThirdClassifies(item, index) {
      intiThirdClassifiesSelected(this, item, index);
      this.thirdSub = item.id;
      this.onChangeThirdParentClassifies(item);
    },
  },
};
/**
 * 获取分类
 *
 * @param that VUE对象
 */
function initSubClassifies(that) {
  ajax.get({
    url: api.resource.privateRouteName + api.resource.children.subClassifies,
    data: {},
    success(res) {
      if (res && res.length > 0) {
        res.forEach((m) => {
          m["selected"] = false;
        });
      } else {
        res = [];
      }
      res.unshift({
        name: that.$t("resourceTypeName.all"),
        selected: true,
      });
      that.sub = res;
    },
    fail(res) {},
  });
}
/**
 * 初始化类型选择状态
 *
 * @param that VUE对象
 * @param item 类型对象数据
 */
function intiTypeDataSelected(that, item) {
  that.classifies.forEach((e) => {
    e.selected = false;
  });
  item.selected = true;
}

/**
 * 初始化类型分类选择状态
 *
 * @param that VUE对象
 * @param item 分类对象数据
 */
function intiClassifiesSelected(that, item, index) {
  that.sub.forEach((e) => {
    e.selected = false;
  });
  that.element = that.sub[index].children;
  item.selected = true;
}

/**
 * 初始化类型子分类选择状态
 *
 * @param that VUE对象
 * @param item 子分类对象数据
 */
function intiThirdClassifiesSelected(that, item, index) {
  that.element.forEach((e) => {
    e.selected = false;
  });
  item.selected = true;
}
</script>

<style scoped>
.top-group {
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 25px 0;
  justify-content: space-between;
  border-bottom: 1px solid #cccccc;
}

.top-classifies-label {
  font-size: 18px;
  color: #999999;
  display: inline-block;
  margin-top: 5px;
}

.res-span {
  display: inline-block;
  padding: 5px 10px;
  background: #ededed;
  border-radius: 4px;
  font-size: 14px;
  color: #999999;
  margin-left: 15px;
  cursor: pointer;
  margin-top: 5px;
}

.res-span-active {
  background: #393d49;
  color: #ffffff;
}

.s1 {
  font-size: 14px;
  margin-top: 5px;
  margin-left: 12px;
  color: #4381e6;
}

#s2,
#s3,
#s4,
#s5 {
  font-size: 15px;
}

#s2 {
  color: #cccccc;
}

#s4 {
  color: #4381e6;
}

#s3,
#s5 {
  color: #cccccc;
}

#s2:hover,
#s3:hover,
#s4:hover,
#s5:hover {
  cursor: pointer;
}
</style>
